import * as React from "react";
import ReactEcharts from "echarts-for-react";
import { TreeSelect, Spin, Modal } from "antd";
// import { getListDepartment } from "../../../ServeApi";
import {
  AjaxData,
  treeSimpleData,
} from "../../../../../../data/interface/publicInterface";
import { situationEnergyTrend } from "../../../ServeApi";
import "./index.less";
export interface EnergyTrendTo31Props {
  energyType: number;
  treeData: treeSimpleData[];
  onChange?: (num: number) => any;
  defaultValue?: string;
  value?: string;
}

export interface EnergyTrendTo31State {
  loading: boolean;
}

class EnergyTrendTo31 extends React.Component<
  EnergyTrendTo31Props,
  EnergyTrendTo31State
> {
  state = { loading: false };
  private treeSelectData: any[] = []; //转换而来的选择树数据
  private selectValue: any = null;
  private option: any = {};
  private energyType: number = 1;
  render() {
    let { option } = this;
    return (
      <div className="EnergyTrendTo31">
        <div className="wy_card" style={{ marginTop: 12 }}>
          <div className="wy_card_tit">
            过去31天分项用能饼图
            <div className="f-right righeSpan">
              <label>分项名称：</label>
              <TreeSelect
                style={{
                  display: "inline-block",
                  width: "auto",
                  minWidth: 200,
                }}
                treeDataSimpleMode
                treeDefaultExpandAll={true}
                treeData={this.treeSelectData}
                value={this.selectValue}
                onChange={(value: string) => {
                  this.onChange(value);
                }}
              />
            </div>
          </div>
          <div className="wy_card_body">
            <Spin spinning={this.state.loading}>
              <ReactEcharts
                option={option}
                notMerge={true}
                lazyUpdate={true}
                style={{ height: 327 }}
              />
            </Spin>
          </div>
        </div>
      </div>
    );
  }
  /**钩子函数 */
  componentDidMount() {
    this.init(this.props);
    if (this.selectValue && this.energyType) {
      this.situationEnergyTrend(); //调用数据
    }
  }
  //props拦截控制刷新
  shouldComponentUpdate(newProps, newState) {
    if (newProps.treeData !== this.props.treeData) {
      this.treeSelectData = newProps.treeData;
      this.forceUpdate();
    }
    if (newProps.defaultValue !== this.props.defaultValue) {
      //初始化分项
      let value =
        typeof newProps.value === "undefined"
          ? newProps.defaultValue
          : newProps.value;
      this.selectValue = value;
      this.situationEnergyTrend();
      this.forceUpdate();
    }
    if (
      newProps.energyType !== this.props.energyType //用能类型更新
    ) {
      this.energyType = newProps.energyType;
      this.forceUpdate();
      this.situationEnergyTrend(); //调用数据
    }
    return true;
  }
  /**主动操作 */
  //切换分项名称
  onChange(value: string) {
    this.selectValue = value;
    this.situationEnergyTrend();
    this.forceUpdate();
  }
  /**方法调用 */
  init(props) {
    let { energyType, treeData } = props;
    let value =
      typeof props.value === "undefined" ? props.defaultValue : props.value;
    this.selectValue = value;
    this.energyType = energyType;
    this.treeSelectData = treeData;
    this.forceUpdate();
  }
  //生成echarts对象
  getWarnOption(dataScouse: any) {
    let str = this.energyType === 1 ? "kW·h" : "t";
    return {
      tooltip: {
        trigger: "axis",
        axisPointer: {
          // 坐标轴指示器，坐标轴触发有效
          type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
        },
      },
      color: ["#FF7979", "#F6B646", "#AC9AF6", "#5AD8A6", "#32C5E9", "#1796FF"],
      grid: {
        left: "3%",
        right: "4%",
        bottom: "3%",
        containLabel: true,
      },
      xAxis: [
        {
          type: "category",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#545658", //更改坐标轴文字颜色
            },
          },
          data: dataScouse.dayList,
        },
      ],
      yAxis: [
        {
          name: "单位：" + str,
          nameTextStyle: {
            color: "#545658",
            fontSize: 14,
          },
          splitLine: {
            //网格线
            show: true,
            lineStyle: {
              color: "#ECECEC",
            },
          },
          type: "value",
          axisLabel: {
            show: true,
            textStyle: {
              color: "#545658", //更改坐标轴文字颜色
            },
          },
        },
      ],
      series: [
        {
          type: "bar",
          barWidth: 9,
          emphasis: {
            focus: "series",
          },
          data: dataScouse.valueList,
        },
      ],
    };
  }
  /**数据请求 */
  //单分项用能趋势
  async situationEnergyTrend() {
    let _this = this;
    let pream = { energyType: this.energyType, typeId: this.selectValue };
    try {
      this.setState({ loading: true });
      let res: any = await situationEnergyTrend(JSON.stringify(pream)).catch(
        (err) => {
          console.log(err);
          _this.setState({ loading: false });
        }
      );
      let json: AjaxData = res;
      if (json.success) {
        _this.option = this.getWarnOption(json.data);
        _this.setState({ loading: false });
        _this.forceUpdate();
      } else {
        Modal.error({
          title: json.message,
          onOk: () => {
            _this.setState({ loading: false });
          },
        });
      }
    } catch (error) {
      Modal.error({
        title: "初始化程序失败，无法读取数据，请刷新页面。",
        onOk: () => {
          _this.setState({ loading: false });
        },
      });
      console.error(error);
    }
  }
}

export default EnergyTrendTo31;
